<template>
	<view class="suggest3">
		<view class="suggest3-top">
			<text style="font-size: 28rpx; margin-left: 40rpx;">已选择投诉类型：{{problem}}</text>
		</view>
		<view class="suggest3-type">
			<view class="suggest3-type-title">
				<text style="font-size: 32rpx; color: red; margin-left: 40rpx;">*</text>
				<text style="font-size: 32rpx;">请选择类别</text>
				<text style="font-size: 24rpx; color: red; margin-left: 20rpx;">【任何获取？】</text>
			</view>
			<view class="suggest3-type-button">
				<view class="suggest3-type-button-part"  v-for="(item,index) in type" :key="index" @click="choosetype(index)" :class="{choosetpye : index == typechoose}">
					<text style="font-size: 32rpx;">{{item}}</text>
				</view>
			</view>
			<view class="suggest3-type-input">
				<view class="suggest3-type-input-part">
					<view class="suggest3-type-input-part-left">
						<input type="text" style="margin-left:5%; width: 75%;height: 100%; font-size: 28rpx;" placeholder="请填写投诉的商品名称" maxlength="25" @input="input1">
					</view>
					<view class="suggest3-type-input-part-right">
						<text style="font-size: 28rpx;">{{inputNum}}/25</text>
					</view>
				</view>
			</view>
			<view class="suggest3-say">
				<view class="suggest3-say-part">
					<view class="suggest3-say-title">
						<text style="font-size: 32rpx; color: red;margin-left: 40rpx;">*</text>
						<text style="font-size: 32rpx;">详细说明</text>
					</view>
					<view class="suggest3-say-biginput">
						<textarea  type="text" style="margin-left:5%; width: 96%;height: 86%; font-size: 28rpx;" placeholder="请输入详细情况说明" maxlength="500" @input="input2"/>
					</view>
					<view class="suggest3-say-biginput-tips">
						<text style="font-size: 28rpx; margin-right: 40rpx;">{{inputNum2}}/500</text>
					</view>
				</view>
			</view>
			<view class="suggest3-bottom">
				<view class="suggest3-bottom-part">
					<view class="suggest3-bottom-up">
						<view class="suggest3-bottom-up-1">
							<text style="font-size: 24rpx;">+</text>
						</view>
						<view class="suggest3-bottom-up-2">
							<text style="font-size: 24rpx;">上传凭证</text>
						</view>
					</view>
				</view>
			</view>
			<view class="surebutton">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				problem:'产品建议',
				type:['商品名称','商家名称','订单编号'],
				typechoose:0,
				inputNum:25,
				inputNum2:500,
			}
		},
		onLoad(e) {
			console.log(e)
			this.getProblem(e)
		},
		methods: {
			getProblem(e){
				if(!e.problem) {this.problem = '产品建议'}
				if(e.problem) { this.problem = e.problem }
			},
			 choosetype(index){
				 this.typechoose = index
			 },
			 input1(e){
				 console.log((e.detail.value).length)
				 this.inputNum =  25 - (e.detail.value).length
			 },
			 input2(e){
				  this.inputNum2 =  500 - (e.detail.value).length
			 }
			 
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: white;
	}
	.suggest3{
		width: 100%;
		height: 100%;
	}
	.suggest3-top{
		width: 100%;
		height: 80rpx;
		background-color: #f6f6f6;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.suggest3-type{
		width: 100%;
		height: 200rpx;
	}
	.suggest3-type-title{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.suggest3-type-button{
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.suggest3-type-button-part{
		width: 200rpx;
		height: 70rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		border: solid 4rpx #cecece;
		color: #cecece;
	}
	.choosetpye{
		background-color: red;
		border: 0 !important;
		color: white;
	}
	.suggest3-type-input{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
	}
	.suggest3-type-input-part{
		width: 96%;
		height: 100%;
		background-color: #f6f6f6;
		display: flex;
		justify-content: center;
		border-radius: 12rpx;
	}
	.suggest3-type-input-part-left{
		width: 84%;
		height: 100%;
	}
	.suggest3-type-input-part-right{
		width: 16%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #cecece;
	}
	.suggest3-say{
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.suggest3-say-part{
		width: 96%;
		height: 100%;

	}
	.suggest3-say-title{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.suggest3-say-biginput{
		width: 100%;
		height: calc(100% - 160rpx);
		background-color: #f6f6f6;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx 12rpx 0 0;
	}
	.suggest3-say-biginput-tips{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #f6f6f6;
		border-radius: 0 0 12rpx 12rpx;
		color: #cecece;
	}
	.suggest3-bottom{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.suggest3-bottom-part{
		width: 96%;
		height: 160rpx;
		display: flex;
		justify-content: flex-start;
	}
	.suggest3-bottom-up{
		width: 180rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
		border-radius: 18rpx;
		border: solid 4rpx #e6e6e6;
		}
	.suggest3-bottom-up-1{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		color: #e6e6e6;
	}
	.suggest3-bottom-up-2{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		color: #e6e6e6;
	}
	.surebutton{
		width: 96%; 
		margin-top:20rpx ; 
		border-radius: 48rpx; 
		background-color: red; 
		color: white;
		height: 100rpx;
		font-size: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
	}
</style>